<!--
 * @描述信息: 登录页
 * @Author:  zls
-->
<template>
  <div class="login">
    <div class="login-box">
      <el-form :model="form" ref="formRef" :rules="rules" :inline="false" status-icon>
        <el-form-item>
          <div class="title">系统登录</div>
        </el-form-item>
        <el-form-item label="" prop="username">
          <el-input v-model="form.username" placeholder="请输入账户" clearable></el-input>
        </el-form-item>
        <el-form-item label="" prop="password">
          <el-input v-model="form.password" placeholder="请输入密码" type="password" autocomplete="off" clearable></el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-row>
            <el-col :span="16">
              <el-input v-model="form.code" placeholder="请输入验证码" clearable />
            </el-col>
            <el-col :span="7">
              <img :src="codeImg" @click="getImage" />
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item>
          <el-row>
            <el-col :span="11">
              <el-button class="mybtn" @click="clear"> 清空 </el-button>
            </el-col>
            <el-col :span="11">
              <el-button class="mybtn" type="primary" @click="login"> 登录 </el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import msg from '@/utils/resetMessage'
import { ref, reactive } from 'vue'
import { userLogin } from '@/api/user'
import { useStore } from '@/store'
import { useRouter } from 'vue-router'
import verificationCode from './verificationCode'

// 验证码模块
const { codeImg, getImage } = verificationCode()

// 登录请求参数类型
interface LoginParam {
  username: string
  password: string
  code: string
}
const store = useStore()
const router = useRouter()

const formRef = ref()
const form: LoginParam = reactive({ username: 'admin', password: '1234', code: '123456' })
const rules = reactive({
  username: [{ required: true, trigger: 'change', message: '请填写登录账户' }],
  password: [{ required: true, trigger: 'change', message: '请填写登录密码' }],
  code: [{ required: true, trigger: 'change', message: '请填写验证码' }]
})

// 登录函数
function login() {
  formRef.value.validate(async (valid: boolean) => {
    if (valid) {
      // const res: any = await userLogin(form)
      // if (res.code === 500) {
      //   msg.warning(res.msg)
      //   return
      // }
      // store.commit('user/SET_TOKEN', res.data)
      store.commit('user/SET_TOKEN', '******token******')
      msg.success('登录成功')
      router.replace('/')
    }
  })
}

// 清空函数
function clear() {
  formRef.value.resetFields()
}
</script>

<style lang="scss" scoped>
.login {
  height: 100%;
  @include flex();
  .login-box {
    height: 320px;
    width: 400px;
    border-radius: 10px;
    padding: 20px 35px;
    box-shadow: 0 0 25px #cac6c6;
    .title {
      font-size: 24px;
      font-weight: 600;
      margin: 0 auto 10px;
    }
    .el-row {
      width: 100%;
      @include flex(center, space-between);
      .el-col {
        height: 32px;
      }
      img {
        height: 32px;
      }
      .mybtn {
        width: 100%;
      }
    }
  }
}
</style>
